var Room = Class
		.create( {
			initialize : function() {
				this.playerList;
				this.userMapArray;
				this.emptyLocationArray;
				this.userArray;
				this.selfPlayer;
				this.gameStarted;
				this.version;
				this.selectedUser;
				this.currentActiveUser;
				this.roomState;
			},
			init : function(o) {

				this.room = o['room'];
				this.id = o.id;
				// this.roomName = this.room.RoomName;
				// this.owner = this.room.owener;
				// this.playerList = this.room.users;
				// this.roomName = o.roomName;
				// this.isOwner = o.isOwner;
				// this.currentUser = o['user'];
				this.playerList = [];
				this.playerListDtl = [];
				this.userMapArray = new Array();
				this.emptyLocationArray = new Array();
				this.gameStarted = false;
				this.lifeCount = o['user'].blood;
				var conf = {};
				conf.id = 'current_player_instance';
				conf.roomId = this.id;
				conf.user = o['user'];
				var player = ComponentManager.loadComponent( {
					componentId : 'current_player_instance',
					jsClassName : 'Player',
					initData : conf
				});
				this.selfPlayer = player;
				this.isOwner = false;
				this.version = 0;
				this.roomState = 0;
			},
			initRoom : function() {
				RoomService.initRoom(this.id);
			},
			doInitialize : function(data, version) {
				//this.roomId = data.roomId;
				this.roomName = data.roomName;
				this.owner = data.ownerName; // owner have key: userName
				this.playerList = data.userList;
				this.playerListDtl = data.userList;
				this.currentUser = data.userName;
				if (this.currentUser == this.owner) {
					this.isOwner = true;
				}
				this.initialPage();
				this.showUsers(this.playerList);
				this.initUsers(this.playerList);
				var lifeHtml = "";
				for ( var i = 0; i < this.lifeCount; i++) {
					lifeHtml = lifeHtml
							+ "					<div id='hp_"
							+ (i + 1)
							+ "' class='hpClass' style='background-color:#FF9900'></div>"
				}

				$('HP_card').innerHTML = lifeHtml;
				$('game_quit').style.display = "";

				this.version = version;
				this.roomState = 1;

		this.getRoleCards = Utility.unDuplicateFunction(this.getRoleCards, this);
		this.getCharacter = Utility.unDuplicateFunction(this.getCharacter, this);
		this.startGame = Utility.unDuplicateFunction(this.startGame, this);
			},
			updateDataVersion : function(version) {
				this.version = version;
//				$('server_data_version').innerHTML = this.version;
			},
			getDataVersion : function(version) {
				return this.version;
			},
			errorMsgShow : function(error) {
				alert(error);
			},
			initialPage : function() {
				this.loadUserArea();
				if (!this.isOwner) {
					$('get_role').style.display = "none";
					$('get_character').style.display = "none";
				}
				$('div_room_game_start').style.display = "none";
				// }
				// RoomService.test();
			},
			getPlayer : function() {
				return this.selfPlayer;
			},
			addUser : function(user) {
			},
			doJoin : function() {
				GameCenter.doJoin(this.setUserList.bind(this));
				GameCenter.notifyDoJoined('room_instance');

			},
			readyToStart : function() {
				if (this.isOwner) {
					var btnStart = $('btn_game_start');
					if(btnStart){
						btnStart.disabled = true;
					}
					$('get_role').disabled = false;
				}
			},
			initUsers : function(playerList) {
				var players = playerList;
				var len = players.length;
				if (len == 1) {
					this.userMapArray['user1'] = players[0];
					this.emptyLocationArray = [ 'user2', 'user3', 'user4',
							'user5', 'user6', 'user7', 'user8' ];
					this.playerList = [ 'user1' ];
				} else if (len == 2) {
					this.userMapArray['user8'] = players[0];
					this.userMapArray['user1'] = players[1];
					this.emptyLocationArray = [ 'user2', 'user3', 'user4',
							'user5', 'user6', 'user7' ];
					this.playerList = [ 'user1', 'user8' ];
				} else if (len == 3) {
					this.userMapArray['user7'] = players[0];
					this.userMapArray['user8'] = players[1];
					this.userMapArray['user1'] = players[2];
					this.emptyLocationArray = [ 'user2', 'user3', 'user4',
							'user5', 'user6' ];
					this.playerList = [ 'user1', 'user7', 'user8' ];
				} else if (len == 4) {
					this.userMapArray['user6'] = players[0];
					this.userMapArray['user7'] = players[1];
					this.userMapArray['user8'] = players[2];
					this.userMapArray['user1'] = players[3];
					this.emptyLocationArray = [ 'user2', 'user3', 'user4',
							'user5' ];
					this.playerList = [ 'user1', 'user6', 'user7', 'user8' ];
				} else if (len == 5) {
					this.userMapArray['user5'] = players[0];
					this.userMapArray['user6'] = players[1];
					this.userMapArray['user7'] = players[2];
					this.userMapArray['user8'] = players[3];
					this.userMapArray['user1'] = players[4];
					this.emptyLocationArray = [ 'user2', 'user3', 'user4' ];
					this.playerList = [ 'user1', 'user5', 'user6', 'user7',
							'user8' ];
				} else if (len == 6) {
					this.userMapArray['user4'] = players[0];
					this.userMapArray['user5'] = players[1];
					this.userMapArray['user6'] = players[2];
					this.userMapArray['user7'] = players[3];
					this.userMapArray['user8'] = players[4];
					this.userMapArray['user1'] = players[5];
					this.emptyLocationArray = [ 'user2', 'user3' ];
					this.playerList = [ 'user1', 'user4', 'user5', 'user6',
							'user7', 'user8' ];
				} else if (len == 7) {
					this.userMapArray['user3'] = players[0];
					this.userMapArray['user4'] = players[1];
					this.userMapArray['user5'] = players[2];
					this.userMapArray['user6'] = players[3];
					this.userMapArray['user7'] = players[4];
					this.userMapArray['user8'] = players[5];
					this.userMapArray['user1'] = players[6];
					this.emptyLocationArray = [ 'user2' ];
					this.playerList = [ 'user1', 'user3', 'user4', 'user5',
							'user6', 'user7', 'user8' ];
				} else if (len == 8) {
					this.userMapArray['user2'] = players[0];
					this.userMapArray['user3'] = players[1];
					this.userMapArray['user4'] = players[2];
					this.userMapArray['user5'] = players[3];
					this.userMapArray['user6'] = players[4];
					this.userMapArray['user7'] = players[5];
					this.userMapArray['user8'] = players[6];
					this.userMapArray['user1'] = players[7];
					this.emptyLocationArray = [];
					this.playerList = [ 'user1', 'user2', 'user3', 'user4',
							'user5', 'user6', 'user7', 'user8' ];
				}
				this.setUserNameToShow();
				for ( var i = 0; i < this.playerList.length; i++) {
					var userid = this.playerList[i];
					this.drawLifeNequipmentCardHolder(players[i],userid);
					this.showUserDesk(userid, true);
				}
				
			},
			
			drawLifeNequipmentCardHolder:function(player, userid){
				if(player == null) return;
//				for ( var i = 0; i < this.playerList.length; i++) {
					var lifeCount = player.blood;
					var lifeHtml = "";
					for ( var i = 0; i < lifeCount; i++) {
						lifeHtml = lifeHtml
								+ "					<div id='"
								+ userid
								+ "_hp_"
								+ (i + 1)
								+ "' class='hpClass' style='background-color:#FF9900'></div>"
					}
					
					if($(userid + '_HP_card') != null){
						$(userid + '_HP_card').innerHTML = lifeHtml;
					}if($('HP_card') != null){
						$('HP_card').innerHTML = lifeHtml;
					}

					if($(userid + '_arm_card') != null){
						$(userid + '_arm_card').style.display = '';
					}if($('_arm_card') != null){
						$('_arm_card').style.display = '';
					}
					
					
//				}
			},
			userJoined : function(joinedplayerList, version) {
				var players = joinedplayerList;
				var len = this.emptyLocationArray.length;
				if (len > 0) {
					var id = this.emptyLocationArray[0];
					this.emptyLocationArray.splice(0, 1);
					this.userMapArray[id] = players;
					this.playerList.push(id);
					this.playerListDtl.push(joinedplayerList);
					$(id + '_player_name').innerHTML = this.userMapArray[id].name;
//					alert("User name " + this.userMapArray[id].name);
					var lifeCount = joinedplayerList.blood;
					var lifeHtml = "";
					for ( var i = 0; i < lifeCount; i++) {
						lifeHtml = lifeHtml
								+ "					<div id='"
								+ id
								+ "_hp_"
								+ (i + 1)
								+ "' class='hpClass' style='background-color:#FF9900'></div>"
					}

					$(id + '_HP_card').innerHTML = lifeHtml;
					$(id + '_arm_card').style.display = '';
					

					this.showUserDesk(id, true);
					this.showUsers(this.playerListDtl);
				}
				if (version) {
					this.version = version;
				}
				return id;
			},

			userQuit : function(data, version) {
				for ( var i = 0; i < this.playerList.length; i++) {
					var userid = this.playerList[i];
					var playerName = $(userid + '_player_name').innerHTML;

				}
				var players = joinedplayerList;
				var len = this.emptyLocationArray.length;
				if (len > 0) {
					var id = this.emptyLocationArray[0];
					this.emptyLocationArray.splice(0, 1);
					this.userMapArray[id] = players;
					this.playerList.push(id);
					this.playerListDtl.push(joinedplayerList);
					$(id + '_player_name').innerHTML = this.userMapArray[id].name;

					var lifeCount = joinedplayerList.blood;
					var lifeHtml = "";
					for ( var i = 0; i < lifeCount; i++) {
						lifeHtml = lifeHtml
								+ "					<div id='"
								+ id
								+ "_hp_"
								+ (i + 1)
								+ "' class='hpClass' style='background-color:#FF9900'></div>"
					}

					$(id + '_HP_card').innerHTML = lifeHtml;

					this.showUserDesk(id, true);
					this.showUsers(this.playerListDtl);
				}
				
				this.version = version;
			},

			setUserLocation : function() {
				if (this.userMapArray && this.userMapArray.length > 0) {
					// this.drawMainPlayCardArea('user2_area', 'user2', 1);
					// this.drawMainPlayCardArea('user3_area', 'user3', 1);
					// this.drawMainPlayCardArea('user4_area', 'user4', 1);
					// this.drawMainPlayCardArea('user5_area', 'user5', 1);
					// this.drawMainPlayCardArea('user6_area', 'user6', 1);
					// this.drawMainPlayCardArea('user7_area', 'user7', 1);
					// this.drawMainPlayCardArea('user8_area', 'user8', 1);
				}
			},
			loadUserArea : function() {
				this.drawMainPlayCardArea('user2_area', 'user2', 1, 4);
				this.drawMainPlayCardArea('user3_area', 'user3', 1, 4);
				this.drawMainPlayCardArea('user4_area', 'user4', 1, 4);
				this.drawMainPlayCardArea('user5_area', 'user5', 1, 4);
				this.drawMainPlayCardArea('user6_area', 'user6', 1, 4);
				this.drawMainPlayCardArea('user7_area', 'user7', 1, 4);
				this.drawMainPlayCardArea('user8_area', 'user8', 1, 4);
			},
			updateOtheUsersProfile : function(user) {
				for ( var i = 0; i < this.playerList.length; i++) {
					var userid = this.playerList[i];
					var playerName = $(userid + '_player_name').innerHTML;
					if (playerName == user.name) {
						$(userid + '_player_name').innerHTML = user.name;
					}
				}
			},

			setUserNameToShow : function() {
				for ( var i = 0; i < this.playerList.length; i++) {
					var userid = this.playerList[i];
					$(userid + '_player_name').innerHTML = this.userMapArray[userid].name;
				}
			},

			setUsergRoleToShow : function(user) {
				if (user.roleCard) {
					for ( var i = 0; i < this.playerList.length; i++) {
						var userid = this.playerList[i];
						var playerName = $(userid + '_player_name').innerHTML;
						if (playerName == user.name
								&& user.roleCard.name == "King") {
							$(userid + '_player_role').innerHTML = "  ["
									+ user.roleCard.name + "] ";
							$(userid + '_player_role').style.color = 'yellow';
						}
					}
				}
			},
			setUserCharacterToShow : function(user) {
				// alert(user.name);
				if (user.characterCard) {
					for ( var i = 0; i < this.playerList.length; i++) {
						var userid = this.playerList[i];
						var playerName = $(userid + '_player_name').innerHTML;
						if (playerName == user.name) {
							$(userid + '_player_character').innerHTML = "  ["
									+ user.characterCard.name + "] ";
							$(userid + '_player_character').title = user.characterCard.policyDescription;

							var lifeCount = user.blood;
							var lifeHtml = "";
							for ( var i = 0; i < lifeCount; i++) {
								lifeHtml = lifeHtml
										+ "					<div id='"
										+ userid
										+ "_hp_"
										+ (i + 1)
										+ "' class='hpClass' style='background-color:#FF9900'></div>"
							}
							if ($(userid + '_HP_card') != null) {
								$(userid + '_HP_card').innerHTML = lifeHtml;
							}
							break;
						}

					}
					if (this.isOwner && this.roomState != 2) {
						//$('btn_game_start').disabled = false;
					}
				}
			},
			setLifeCountToShow : function(user) {

				for ( var i = 0; i < this.playerList.length; i++) {
					var userid = this.playerList[i];
					var playerName = $(userid + '_player_name').innerHTML;
					if (playerName == user.name) {
						var lifeCount = user.blood;
						var lifeHtml = "";
						for ( var i = 0; i < lifeCount; i++) {
							lifeHtml = lifeHtml
									+ "					<div id='"
									+ userid
									+ "_hp_"
									+ (i + 1)
									+ "' class='hpClass' style='background-color:#FF9900'></div>"
						}
						if ($(userid + '_HP_card') != null) {
							$(userid + '_HP_card').innerHTML = lifeHtml;
						}
					}
				}
			},

			setCardCountToShow : function(data) {
				for ( var i = 0; i < this.playerList.length; i++) {
					var userid = this.playerList[i];
					var playerName = $(userid + '_player_name').innerHTML;
					if (data[playerName]) {
						var cardCount = data.cardCount;
						this.drawOtherPlayerBackCard(userid, cardCount);

					}
				}
			},
			setEquipementCardToShow : function(data) {

				for ( var i = 0; i < this.playerList.length; i++) {
					var userid = this.playerList[i];
					var playerName = $(userid + '_player_name').innerHTML;
					if (data[playerName]) {
						var allEquipementCards = data[playerName];
						// for ( var j = 0; j < allEquipementCards.length; j++)
						// {
						//					
						// }
						this.drawOtherPlayerEquipementCard(userid,
								allEquipementCards);

					}
				}
			},

			setPlayedCardToShow : function(data) {

				for ( var i = 0; i < this.playerList.length; i++) {
					var userid = this.playerList[i];
					var playerName = $(userid + '_player_name').innerHTML;
					if (data[playerName]) {
						var allPlayedCards = [];
						allPlayedCards.push(data[playerName]);
						// for ( var j = 0; j < allEquipementCards.length; j++)
						// {
						//					
						// }
						this.drawPlayedCard(userid, allPlayedCards);

					}
				}
			},

			getRoleCards : function() {
				if (this.isOwner) {
					$('get_role').disabled = true;
				}
				var roomHandler = this;
				RoomService.getRoleCards(this.version, 
				{callback:function() {$('get_role').style.display = "none";},
				  errorHandler:roomHandler.errorHandlerOfGetRole.bind(roomHandler)
				});
				// this.dispatchCards(null);
				// GameCenter.dispatchCards('room_instance');
			},
			errorHandlerOfGetRole : function(){
				alert("Get Role maybe timeout, now will try again" );
				RoomService.getRoleCards(this.version, 
				  {callback:function() {},
				  errorHandler:function(msg,ex) {
						alert("Error happened, Now is quiting");
						this.quit();
					}
				});
			},
			errorHandlerOfGetCharacter : function(){
				alert("Get Character maybe timeout, now will try again" );
				RoomService.getCharacter(this.version, 
				  {callback:function() {},
				  errorHandler:function(msg,ex) {
						alert("Error happened, Now is quiting");
						this.quit();
					}
				});
			},
			getCharacter : function() {
				if (this.isOwner) {
					$('get_character').disabled = true;
				}
				var roomHandler = this;
				RoomService.getCharacterCards(this.version,
				{callback:function() {$('get_character').style.display = "none";},
				  errorHandler:roomHandler.errorHandlerOfGetCharacter.bind(roomHandler)
				});
				// this.dispatchCards(null);
				// GameCenter.dispatchCards('room_instance');
			},
			errorHandlerOfStartGame : function(){
				alert("Game start maybe timeout, now will try again" );
				RoomService.startGame(this.version, 
				  {callback:function() {$('btn_game_start').disabled = true;},
				  errorHandler:function(msg,ex) {
						alert("Error happened, Now is quiting");
						this.quit();
					}
				});
			},
			startGame : function() {
				var roomHandler = this;
				RoomService.startGame(this.version,
				{callback:function() {$('div_room_game_start').style.display = "none";},
				  errorHandler:roomHandler.errorHandlerOfStartGame.bind(roomHandler)
				});
				this.roomState = 4;
				// this.dispatchCards(null);
				// GameCenter.dispatchCards('room_instance');
			},
			errorHandlerOfFinishPlay : function(jsId){
				alert("Finish play maybe timeout, now will try again" );
				RoomService.finishPlay(jsId, this.version,
				{callback:function() {},
				  errorHandler:function(msg,ex) {
						alert("Error happened, Now is quiting");
						this.quit();
					}
				});
			},
			finishPlay : function(jsId) {
				var roomHandler = this;
				RoomService.finishPlay(jsId, this.version,
				{callback:function() {},
				  errorHandler:roomHandler.errorHandlerOfFinishPlay.bind(roomHandler, jsId)
				});
//				$('send_data_version').innerHTML = this.version;
			},
			dispatchCards : function(cards) {
				// var dataCards =
				// "[{title:'C1',content:'AK47',distance:3,cardType:'arm'},{title:'C2',content:'Attack',distance:1,cardType:'base'},{title:'C3',content:'Defend',distance:0,cardType:'base'},{title:'C4',content:'Beer',distance:0,cardType:'base'},{title:'C2',content:'Picking',distance:1,cardType:'pocket'}]";
				// cards = dataCards;
				// var userArray = new Array('user1', 'user2', 'user3', 'user4',
				// 'user5', 'user6', 'user7', 'user8');
				this.selfPlayer.setUserAttack(this.playerList,
						this.userMapArray);
				this.selfPlayer.drawCards('user1_main_card', cards);
				if (!this.gameStarted) {
					for ( var i = 0; i < this.playerList.length; i++) {
						var userid = this.playerList[i];
						if (userid != 'user1') {
							this.drawOtherPlayerBackCard(userid, 4);
						}
					}
				}
				this.gameStarted = true;
			},
			setActiveCards : function(cards) {
				//alert("setActiveCards");
				this.selfPlayer.setActiveCards(cards);
			},
			drawOtherPlayerBackCard : function(userId, cardLen) {
				var parentId = userId + '_main_card';
				if($(parentId)){
					$(parentId).innerHTML = "";
					for ( var i = 0; i < cardLen; i++) {
						// get card index base on existed cards
						var divId = userId + '_card_' + i;
						var newCard = new ObjectCard();
						var conf = {};
						conf.id = divId;
						conf.parentId = parentId;
						newCard.init(conf);
						newCard.drawBack();
					}
				}
			},

			drawOtherPlayerEquipementCard : function(userId, cardList) {
				var parentId = userId + '_arm_card';
				if(cardList.length > 0){
					$(parentId).innerHTML = "";
					for ( var i = 0; i < cardList.length; i++) {
						// get card index base on existed cards
						var divId = userId + '_arm_' + i;
	
						// var conf = this.selectedCard.conf;
						// conf.parentId = userId + '_arm_' + i;
						// var card = new ObjectCard();
						// card.init(conf);
						// card.resetCardDraw("arm_" + index);
	
						var newCard = new ObjectCard();
						var conf = {};
						conf.id = divId;
						conf.parentId = parentId;
						conf.class = "armClass";
						conf.content = cardList[i].displayName;
						newCard.init(conf);
						newCard.drawFront();
					}
				}
			},

			drawPlayedCard : function(userId, cardList) {
				var parentId = userId + '_card_receive_area';
				$(parentId).innerHTML = "";
				for ( var i = 0; i < cardList.length; i++) {
					// get card index base on existed cards
					var divId = userId + '_played_' + i;

					// var conf = this.selectedCard.conf;
					// conf.parentId = userId + '_arm_' + i;
					// var card = new ObjectCard();
					// card.init(conf);
					// card.resetCardDraw("arm_" + index);

					var newCard = new ObjectCard();
					var conf = {};
					conf.id = divId;
					conf.parentId = parentId;
					conf.class = "armClass";
					conf.content = cardList[i];
					newCard.init(conf);
					newCard.drawFront();
				}
			},

			playerDiscard : function(playerId, card) {
			},
			playerHealLife : function(playerId, count) {
			},
			readyToPlay : function() {
				this.selfPlayer.setActive(true);
			},
			recieveRoleCard : function(cards) {
				this.selfPlayer.recieveRoleCard(cards);
				if (this.isOwner) {
					$('get_character').disabled = false;
				}
				// $('get_role').disabled = true;
			},
			recieveCharacterCard : function(cards) {
				this.selfPlayer.recieveCharacterCard(cards);
				// var lifeCount = cards.blood;
				// alert("blood" + lifeCount);
				// var lifeHtml ="";
				// for ( var i= 0; i < lifeCount; i++) {
				// lifeHtml = lifeHtml + " <div id='{userId}_hp_"+(i+1)+"'
				// class='hpClass' style='background-color:#FF9900'></div>"
				// }
				//		
				// $('HP_card').innerHTML = lifeHtml;
				// $('get_character').disabled = true;
			},
			receiveCard : function(cards) {
				this.selfPlayer.receiveCard(cards);
			},
			quit : function() {
				//alert('quit');
				this.isFreeUser = true;
				//release player
				ComponentManager.removeComponent('current_player_instance');
				RoomService.quitRoom(afterQuit);

			},

			selectUser : function(user) {
				if (this.selectedUser) {
					var element = document
							.getElementById(this.selectedUser + '_card_area');
					element.style.border = "";
					if (this.selectedUser == user) {
						this.selectedUser = null;
					} else {
						element = document.getElementById(user + '_card_area');
						element.style.border = "solid 2px #0000ff";
						this.selectedUser = user;
					}
				} else {
					var element = document.getElementById(user + '_card_area');
					element.style.border = "solid 2px #0000ff";
					this.selectedUser = user;
				}
			},

			getSelectedUser : function() {
				return this.userMapArray[this.selectedUser];
			},

			clearSelectedUser : function() {
				if (this.selectedUser) {
					var element = document
							.getElementById(this.selectedUser + '_card_area');
					element.style.border = "";
					this.selectedUser = null;
				}
			},
			showUserDesk : function(user, isShow) {
				var element = document.getElementById(user + '_card_area');
				if (element) {
					if (isShow) {
						element.style.visibility = "visible";
					} else {
						element.style.visibility = "hidden";
					}
				}
			},
			drawMainPlayCardArea : function(parentDivId, userid, type,
					lifeCount) {
				// var lifeColor
				// ={"#FF0000","#CC9900","#99CC00","#66CC00","#009900"};
				var lifeHtml = '<span style="color:black">unoccupied</span>';
				for ( var i = 0; i < 0; i++) {
					lifeHtml = lifeHtml
							+ "					<div id='"
							+ userid
							+ "_hp_"
							+ (i + 1)
							+ "' class='hpClass' style='background-color:#FF9900'></div>"
				}
				var mainHTML = "<div id='{userId}_card_area' style='visibility:visible;border: 2px solid white; -moz-border-radius: 10px;background-color: #363432' onclick='(ComponentManager.getComponentById(\"room_instance\")).selectUser(\"{userId}\")'>"
						+ "	<table width='100%' cellpadding='0' cellspacing='0' border='0'>"
						+ "		<tbody><tr><td colspan=2>"
						+ "				<div id='{userId}_arm_card' style='width:100%float:left;'>"
						+ "					<div id='{userId}_arm_0' class='armClass'></div>"
						+ "					<div id='{userId}_arm_1' class='armClass'></div>"
						+ "					<div id='{userId}_arm_2' class='armClass'></div>"
						+ "					<div id='{userId}_arm_3' class='armClass'></div>"
						+ "					<div id='{userId}_arm_4' class='armClass'></div>"
						+ "				</div>"
						+ "			</td></tr>"
						+ "			<tr><td colspan=2>"
						+ "			<table cellpadding='0' width='100%'>"
						+ "			  <tbody><tr><td align='left'>"
						+ "				<div id='{userId}_HP_card' style='float:left;width: 100%;'>"
						+ lifeHtml
						// + " <div id='{userId}_hp_1' class='hpClass'
						// style='background-color:#FF0000'></div>"
						// + " <div id='{userId}_hp_2' class='hpClass'
						// style='background-color:#CC9900'></div>"
						// + " <div id='{userId}_hp_3' class='hpClass'
						// style='background-color:#99CC00'></div>"
						// + " <div id='{userId}_hp_4' class='hpClass'
						// style='background-color:#66CC00'></div>"
						// + " <div id='{userId}_hp_5' class='hpClass'
						// style='background-color:#009900'></div>"
						+ "				</div>"
						+ "			  </td></tr></tbody></table>"
						+ "			</td></tr>"
						+ "			  <tr><td align='left'>"
						+ "					<span id='{userId}_player_name'></span>"
						+ "			  </td></tr>"
						+ "			  <tr><td  align='left'>"
						+ "					<span id='{userId}_player_role'></span><span id='{userId}_player_character'></span>"
						+ "			</td></tr>"
						+ "			<tr><td colspan=2>"
						+ "				<div id='{userId}_main_card' style='width:175px;height:60px;float:left;'></div>"
						+ "			</td></tr></tbody></table>" + "</div>";

				var overTurnHTML = "<div id='{userId}_card_area'>"
						+ "	<table width='100%' cellpadding='0'>"
						+ "		<tbody><tr><td>"
						+ "				<div id='{userId}_main_card' style='border: solid 1px;width:175px;height:60px;float:left;'></div>"
						+ "			</td></tr>"
						+ "			<tr><td>"
						+ "			<table cellpadding='0'>"
						+ "			  <tbody><tr><td align='left'>"
						+ "				<div id='{userId}_HP_card' style='border: solid 1px;width:175px;float:left;'>"
						+ lifeHtml
						// + " <div id='{userId}_hp_1' class='hpClass'
						// style='background-color:#009900'></div>"
						// + " <div id='{userId}_hp_2' class='hpClass'
						// style='background-color:#66CC00'></div>"
						// + " <div id='{userId}_hp_3' class='hpClass'
						// style='background-color:#99CC00'></div>"
						// + " <div id='{userId}_hp_4' class='hpClass'
						// style='background-color:#CC9900'></div>"
						// + " <div id='{userId}_hp_5' class='hpClass'
						// style='background-color:#FF0000'></div>"
						+ "				</div>"
						+ "			  </td><td  align='right'>"
						+ "					<span id='{userId}_player_name'></span><span id='{userId}_player_role'></span>"
						+ "			  </td></tr></tbody></table>"
						+ "			</td></tr>"
						+ "			<tr><td>"
						+ "				<div id='{userId}_arm_card' style='border: solid 1px;width:175px;float:left;'>"
						+ "					<div id='{userId}_arm_0' class='armClass'></div>"
						+ "					<div id='{userId}_arm_1' class='armClass'></div>"
						+ "					<div id='{userId}_arm_2' class='armClass'></div>"
						+ "					<div id='{userId}_arm_3' class='armClass'></div>"
						+ "					<div id='{userId}_arm_4' class='armClass'></div>"
						+ "				</div>" + "			</td></tr></tbody></table>"
						+ "</div>";

				var element = document.getElementById(parentDivId);
				if (type == 2) {
					var innerHtml = Utility.format(overTurnHTML, {
						userId : userid
					});
				} else {
					var innerHtml = Utility.format(mainHTML, {
						userId : userid
					});
				}
				element.innerHTML = innerHtml;
				$(userid + '_arm_card').style.display = 'none';
			},

			showUsers : function(userList) {
				this.users = new Array();
				this.height = 0;
				this.userQuit = null;
				var ownerCSS = "";
				var deadUserCSS = "";
				var css = "";
				for ( var i = 0; i < userList.length; i++) {
					css = "";
					var currRoom = "-";
					var roomOwner = "-";

					this.currRoom = "";
					if (this.owner == userList[i].name) {
						this.playerType = 'owner';
						css = css + ownerCSS;
						// this.roomOwner = userList[i].currentRoom.ownerName;
					}
					if (userList[i].state == 2) {
						this.playerType = "DEAD - ["
								+ userList[i].roleCard.name + "]";
						css = css + deadUserCSS;
					}
					// this.users[i] = {'userName':userList[i].name
					// ,'roomName':this.currRoom ,'owner':this.roomOwner}
					this.users[i] = {
						'userName' : userList[i].name,
						'playerType' : this.playerType
					}
					this.playerType = "";
					// find o
				}

				this.columnDefs = [ {
					key : "userName",
					label : "User Name",
					resizeable : true,
					width : 80
				}, {
					key : "playerType",
					label : "Player Type",
					resizeable : true,
					width : 80
				}
				// ,
				// {key:"owner",lebel:"Room Owner", resizeable:true}
				];
				this.rowFormatter = function(elTr, oRecord) {
					if (oRecord.getData('playerType').length > 0) {
						YAHOO.util.Dom.addClass(elTr, 'mark');
					} else {
						// YAHOO.util.Dom.addClass(elTr, '');
					}
					return true;
				};

				var init = {
					'colDef' : this.columnDefs,
					'title' : "User List",
					'targetPosition' : 'deskFrameUserlist'
				};
				var userListTbl = ComponentManager.loadComponent( {
					componentId : 'deskFrameUserlist_table',
					jsClassName : 'DataTableWidget',
					initData : init
				});
				userListTbl.setRowFormatter(this.rowFormatter);
				// userListTbl.drawTable(this.users);

			},

			updateGameLog : function(gameLog) {
				var element = document.getElementById('gameLog');
				element.innerHTML = "";
				for ( var i = 0; i < gameLog.length; i++) {
					element.innerHTML = element.innerHTML + "<br/>"
							+ gameLog[i].logMsg;
				}
				element.scrollTop = element.scrollHeight;
			},

			showResult : function(winner) {
				if(winner == null) return;
				clientSideInclude('deskfarme', 'result.html');
				var result = "Game is Over <br/>"
					for ( var i = 0; i < winner.length; i++) {
						result = result + "<br/> The winner is - " + winner[i].name
								+ " [ " + winner[i].roleCardName + " ] ";
					}
//				for ( var i = 0; i < winner.length; i++) {
//					result = result + "<br/> The winner is - " + winner[i].name
//							+ " [ " + winner[i].roleCard.name + " ] ";
//				}
				$('result').innerHTML = result;
				this.isFreeUser = true;
			},
			showCurrentActiveUser : function(activeUser) {
				if (this.currentActiveUser) {
					var element = document
							.getElementById(this.currentActiveUser + '_card_area');
					if (element) {
						element.style.border = "solid 2px white";
					}
				}
				for ( var i = 0; i < this.playerList.length; i++) {
					var user = this.playerList[i];
					if (this.userMapArray[user]) {
						if (this.userMapArray[user].name == activeUser.name) {
							var element = document
									.getElementById(user + '_card_area');
							if (element) {
								element.style.border = "solid 4px #FFFF00";
								this.currentActiveUser = user;
								break;
							}
						}
					}
				}
			},
			showActiveUserLife : function(activeUser, lifeCount, isAddLife) {
				for ( var i = 0; i < this.playerList.length; i++) {
					var user = this.playerList[i];
					if (this.userMapArray[user]) {
						if (this.userMapArray[user].name == activeUser.name) {
							if (isAddLife) {
								$(user + '_hp_' + lifeCount).setStyle( {
									background : '#FF9900'
								});
							} else {
								$(user + '_hp_' + lifeCount).setStyle( {
									background : '#FFFFFF'
								});
							}
						}
					}
				}
			},

			roomUIUpdate : function(data,version){
				//room init
		//		this.doInitialize(data, version);
				if(this.roomState > 0){
					this.version = version;
					
					//refresh user, if user is quit, before game start.
					if(data.userList.length < this.playerListDtl.length){
						if(this.roomState < 2){
							this.resetUsers(data.userList);
						}
						else{
							//show quit user
							this.checkAndShowUserQuit(data.userList);
						}
					}
					//user notification
					this.redrawGameWindow(data);
					if(data.gameState == 9){
						this.readyToStart();
					}
				}
				if (data != null && data.allChatMessage != null) {
					componentExecFunctionWithCall(
							'chatMsgListModel_instance', 'inititalizeList',
							data.allChatMessage);
				}
			},
			
			redrawGameWindow:function(data){
				//draw each users deck
				var userList = [];
				userList = data.userList;
				for ( var int = 0; int < userList.length; int++) {
					//init game deck for user if self user special game deck
					var user = userList[int];
					
					if(user.state == 2){
						this.showDieUser(user);
					}
		
					if(user.name != this.currentUser){
						//get user id of client
						var clientUserId = this.getClientUserId(user);
						if(!clientUserId){
							if (!this.gameStarted) {
								clientUserId = this.userJoined(user);
							}
						}
						
		
						//draw role and character
						this.setUsergRoleToShow(user);
						this.setUserCharacterToShow(user);    //include blood draw
//						this.setCardCountToShow(user);
						//draw life count
						if(user.bloodCount){
							var bloodCount = user.bloodCount;
						}
						
						//draw card count
						if(user.cardCount && user.cardCount>0){
							var cardCount = user.cardCount;
							this.drawOtherPlayerBackCard(clientUserId,cardCount);
						}
						//this.setCardCountToShow()
						
						//draw equipment cards
						if(user.equipmentCards){
							var allEquipementCards = user.equipmentCards;
							this.drawOtherPlayerEquipementCard(clientUserId,allEquipementCards);
						}
						//this.setEquipementCardToShow(data);
		
						if(user.recievedPLayedCard != null){
							var cards = [user.recievedPLayedCard];
							this.drawPlayedCard(clientUserId,cards);
						}
						
						
						
						//draw play cards
//						if(user.gameCards){
//							this.drawOtherPlayerBackCard(clientUserId, 4);
//						}
						
						//set active status
					}
					else{
						if(!this.gameStarted){
							if(user.gameCards){
								this.selfPlayer.setUserAttack(this.playerList, this.userMapArray);
								this.selfPlayer.refreshAllCards('user1_main_card', user.gameCards);
								//this.dispatchCards(user.gameCards);
								this.gameStarted = true;
							}
						}
						if(user.registerAttack && user.attackUserList){
							this.selfPlayer.registerAttackableUserByUserName(user.attackUserList);
						}
						if(user.isOnTurn){
							var roomHandler = this;
							RoomService.userOnTurn(
							{callback:function() {},
							  errorHandler:function(msg,ex) {
								  errorHandler:roomHandler.errorHandlerOfUserOnTrun.bind(roomHandler)
								}
							});
						}
						if(user.havePendingEvent){
							var roomHandler = this;
							RoomService.executionPendingEvent(
							{callback:function() {},
							  errorHandler:function(msg,ex) {
								  errorHandler:roomHandler.errorHandlerOfPendingEvent.bind(roomHandler)
								}
							});
						}
						//draw role and character
						//this.setUsergRoleToShow(user);
						if(user.roleCard){
							//this.recieveRoleCard(user.roleCard);
							this.selfPlayer.recieveRoleCard(user.roleCard);
						}
						if(user.characterCard){
							//this.recieveCharacterCard(user.characterCard);
							this.selfPlayer.recieveCharacterCard(user.characterCard);
						}
						/*
						if(user.roleCard!=null)this.selfPlayer.recieveRoleCard(user.roleCard);
						if(user.characterCard!=null)this.selfPlayer.recieveCharacterCard(user.characterCard);
		
						//draw life count
						this.setLifeCountToShow(user);
						
						var cards = user.cardList;
						//draw card count
						if(cards!=null)this.selfPlayer.refreshUserCard(cards);
						
						//draw equipment cards
						*/
		
						
						
					}
					if(user.isActive){
						this.showCurrentActiveUser(user);
					}
					
				}
				
				//draw game log
				if(data.gameLogList != null){
					this.updateGameLog(data.gameLogList);
				}
				
			},
			getClientUserId : function(user){
				for(var i=0; i<this.playerList.length; i++){
					var userid = this.playerList[i];
					var playerName = $(userid +'_player_name').innerHTML;
					if(playerName == user.name){
						return userid;
					}
				}
			},
			activeHangUser : function(){
				RoomService.activeHangUser(
				{callback:function() {},
				  errorHandler:function(msg,ex) {
					  errorHandler:roomHandler.errorHandlerOfActiveHangUser.bind(roomHandler)
					}
				});
			},
			resetUsers : function(playerList){
				var players = playerList;
				var size = playerList.length;
				var len = 0;
				for(var i=0; i<size; i++){
					if(this.currentUser == playerList[i].name){
						len = i+1;
						break;
					}
				}
				this.playerList = [];
				this.playerListDtl = playerList;
				this.userMapArray = new Array();
				//initial the users before self user.
				if(len == 1){
					this.userMapArray['user1'] = players[0];
					this.emptyLocationArray = ['user2', 'user3', 'user4', 'user5', 'user6', 'user7', 'user8'];
					this.playerList = ['user1'];
				}
				else if(len == 2){
					this.userMapArray['user8'] = players[0];
					this.userMapArray['user1'] = players[1];
					this.emptyLocationArray = ['user2', 'user3', 'user4', 'user5', 'user6', 'user7'];
					this.playerList = ['user1', 'user8'];
				}
				else if(len == 3){
					this.userMapArray['user7'] = players[0];
					this.userMapArray['user8'] = players[1];
					this.userMapArray['user1'] = players[2];
					this.emptyLocationArray = ['user2', 'user3', 'user4', 'user5', 'user6'];
					this.playerList = ['user1', 'user7', 'user8'];
				}
				else if(len == 4){
					this.userMapArray['user6'] = players[0];
					this.userMapArray['user7'] = players[1];
					this.userMapArray['user8'] = players[2];
					this.userMapArray['user1'] = players[3];
					this.emptyLocationArray = ['user2', 'user3', 'user4', 'user5'];
					this.playerList = ['user1', 'user6', 'user7', 'user8'];
				}
				else if(len == 5){
					this.userMapArray['user5'] = players[0];
					this.userMapArray['user6'] = players[1];
					this.userMapArray['user7'] = players[2];
					this.userMapArray['user8'] = players[3];
					this.userMapArray['user1'] = players[4];
					this.emptyLocationArray = ['user2', 'user3', 'user4'];
					this.playerList = ['user1', 'user5', 'user6', 'user7', 'user8'];
				}
				else if(len == 6){
					this.userMapArray['user4'] = players[0];
					this.userMapArray['user5'] = players[1];
					this.userMapArray['user6'] = players[2];
					this.userMapArray['user7'] = players[3];
					this.userMapArray['user8'] = players[4];
					this.userMapArray['user1'] = players[5];
					this.emptyLocationArray = ['user2', 'user3'];
					this.playerList = ['user1', 'user4', 'user5', 'user6', 'user7', 'user8'];
				}
				else if(len == 7){
					this.userMapArray['user3'] = players[0];
					this.userMapArray['user4'] = players[1];
					this.userMapArray['user5'] = players[2];
					this.userMapArray['user6'] = players[3];
					this.userMapArray['user7'] = players[4];
					this.userMapArray['user8'] = players[5];
					this.userMapArray['user1'] = players[6];
					this.emptyLocationArray = ['user2'];
					this.playerList = ['user1', 'user3', 'user4', 'user5', 'user6', 'user7', 'user8'];
				}
				else if(len == 8){
					this.userMapArray['user2'] = players[0];
					this.userMapArray['user3'] = players[1];
					this.userMapArray['user4'] = players[2];
					this.userMapArray['user5'] = players[3];
					this.userMapArray['user6'] = players[4];
					this.userMapArray['user7'] = players[5];
					this.userMapArray['user8'] = players[6];
					this.userMapArray['user1'] = players[7];
					this.emptyLocationArray = [];
					this.playerList = ['user1', 'user2', 'user3', 'user4', 'user5', 'user6', 'user7', 'user8'];
				}
				//initialize the users after self
				if(this.emptyLocationArray.length > 0){
					var emptyid;
					for(var i=len; i<playerList.length; i++){
						var emptyid = this.emptyLocationArray[0];
						this.emptyLocationArray.splice(0,1);
						this.userMapArray[emptyid] = players;
						this.playerList.push(emptyid);
					}
					if(emptyid){
						$(emptyid +'_player_name').innerHTML = this.userMapArray[emptyid].name;
					}
				}
				
				this.setUserNameToShow();
				for(var i=0; i<this.playerList.length; i++){
					var userid = this.playerList[i];
					this.drawLifeNequipmentCardHolder(players[i],userid);
					this.showUserDesk(userid, true);
				}
			},
			showDieUser : function(user){
				//get user id of client
				var clientUserId = this.getClientUserId(user);
				if(clientUserId){
					if($(clientUserId + '_arm_card')){
						$(clientUserId + '_arm_card').innerHTML = "";
					}
					else if($('arm_card')){
						$('arm_card').innerHTML = "";
					}
					if($(clientUserId + '_HP_card')){
						$(clientUserId + '_HP_card').innerHTML = "";
					}
					else if($('HP_card')){
						$('HP_card').innerHTML = "";
					}
					$(clientUserId + '_main_card').innerHTML = "The User is die!";
				}
			},
			checkAndShowUserQuit : function(users){
				for(var i=0; i<this.playerList.length; i++){
					var user = this.playerList[i];
					if(this.userMapArray[user]){
						var isExisted = false;
						for(var j=0; j<users.length; j++){
							if(this.userMapArray[user].name == users[j].name){
								isExisted = true;
								break;
							}
						}
						if(!isExisted){
							//show quit user
							$(user + '_arm_card').innerHTML = "";
							$(user + '_HP_card').innerHTML = "";
							$(user + '_main_card').innerHTML = "The User is quit!";
							return;
						}
					}
				}
			},
			setGameStart : function(){
				if (this.roomState < 4) {
					$('btn_game_start').disabled = false;
				}
				else{
					$('btn_game_start').disabled = true;
				}
			},
			errorHandlerOfUserOnTrun : function(){
				alert("User on trun maybe timeout, now will try again" );
				RoomService.userOnTurn(
				{callback:function() {},
				  errorHandler:function(msg,ex) {
						alert("Error happened, Now is quiting");
						this.quit();
					}
				});
			},
			errorHandlerOfPendingEvent : function(){
				alert("Pending event maybe timeout, now will try again" );
				RoomService.executionPendingEvent(
				{callback:function() {},
				  errorHandler:function(msg,ex) {
						alert("Error happened, Now is quiting");
						this.quit();
					}
				});
			},
			errorHandlerOfActiveHangUser : function(){
				alert("Active hang user maybe timeout, now will try again" );
				RoomService.activeHangUser(
				{callback:function() {},
				  errorHandler:function(msg,ex) {
						alert("Error happened, Now is quiting");
						this.quit();
					}
				});
			},
			getRoomState : function(){
				return this.roomState;
			},
			setRoomState : function(state){
				this.roomState=state;
			}
			
			
			
			//,
		//	updateQuitUser(user){
		//		for(var i=0; i<this.playerList.length; i++){
		//			var userid = this.playerList[i];
		//			var playerName = $(userid +'_player_name').innerHTML;
		//			if(playerName == user.name){
		//				$(userid +'_player_name').innerHTML = "";
		//				
		//				break;
		//			}
		//			
		//		}
		//	}
		});